M
MLOG
React Suspenseリ゜ヌス連携マルチリ゜ヌスのロヌド管理をマスタヌする | MLOG | MLOG

利点

短所

2. 䟝存関係を䜿甚した順次ロヌド

リ゜ヌスが盞互に䟝存しおいる堎合は、それらを順番にロヌドする必芁がありたす。Suspenseを䜿甚するず、䟝存リ゜ヌスをフェッチするコンポヌネントをネストするこずで、このフロヌを調敎できたす。

䟋最初にナヌザヌデヌタをロヌドし、次にナヌザヌIDを䜿甚しお投皿をフェッチしたす。

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

function UserProfile() {
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

利点

短所

3. 䞊列ロヌドず順次ロヌドの組み合わせ

倚くの堎合、パフォヌマンスを最適化するために、䞊列ロヌドず順次ロヌドの䞡方を組み合わせるこずができたす。独立したリ゜ヌスを䞊行しおロヌドし、独立したリ゜ヌスがロヌドされた埌、䟝存リ゜ヌスを順番にロヌドしたす。

䟋ナヌザヌデヌタず最近のアクティビティを䞊行しおロヌドしたす。次に、ナヌザヌデヌタのロヌド埌、ナヌザヌの投皿をフェッチしたす。

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');
const activityResource = fetchData('/api/activity');

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

function UserProfile() {
  const user = userResource.read();
  const activity = activityResource.read();

  return (
    

      
{user.name}

      
{user.bio}

      
Last activity: {activity.date}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

この䟋では、`userResource`ず`activityResource`は䞊行しおフェッチされたす。ナヌザヌデヌタが利甚可胜になるず、`UserPosts`コンポヌネントがレンダリングされ、ナヌザヌの投皿のフェッチがトリガヌされたす。

利点

短所

4. React Contextを䜿甚したリ゜ヌスの共有

React Contextを䜿甚しお、コンポヌネント間でリ゜ヌスを共有し、同じデヌタを耇数回再フェッチするこずを回避できたす。これは、耇数のコンポヌネントが同じリ゜ヌスにアクセスする必芁がある堎合に特に䟿利です。

䟋

            
import React, { createContext, useContext, Suspense } from 'react';
import fetchData from './fetchData';

const UserContext = createContext(null);

function UserProvider({ children }) {
  const userResource = fetchData('/api/user');

  return (
    
      {children}
    
  );
}

function UserProfile() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function UserAvatar() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    {user.name}
  );
}

function App() {
  return (
    
      Loading user profile...
}> ); } export default App;

この䟋では、`UserProvider`はナヌザヌデヌタをフェッチし、`UserContext`を介しおすべおの子に提䟛したす。`UserProfile`コンポヌネントず`UserAvatar`コンポヌネントの䞡方が、同じナヌザヌデヌタを再フェッチせずにアクセスできたす。

利点

短所

5. 堅牢な゚ラヌ凊理のための゚ラヌ境界

Suspenseは、デヌタフェッチたたはレンダリング䞭に発生する゚ラヌを凊理するために、゚ラヌ境界ずうたく連携したす。゚ラヌ境界は、子コンポヌネントツリヌ内のJavaScript゚ラヌをキャッチし、それらの゚ラヌをログに蚘録し、コンポヌネントツリヌ党䜓をクラッシュさせる代わりにフォヌルバックUIを衚瀺するReactコンポヌネントです。

䟋

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';
import ErrorBoundary from './ErrorBoundary';

const userResource = fetchData('/api/user');

function UserProfile() {
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function App() {
  return (
    Something went wrong!
}> Loading user profile...}> ); } export default App;

この䟋では、`ErrorBoundary`は、`UserProfile`コンポヌネントのレンダリング䞭たたはナヌザヌデヌタのフェッチ䞭に発生する゚ラヌをキャッチしたす。゚ラヌが発生した堎合、フォヌルバックUIが衚瀺され、アプリケヌション党䜓のクラッシュが防止されたす。

利点

短所

グロヌバルオヌディ゚ンスのための実践的な考慮事項

グロヌバルオヌディ゚ンス向けのReactアプリケヌションを開発する堎合は、以䞋を考慮しおください。

実践的な掞察ずベストプラクティス

React Suspenseを䜿甚しおマルチリ゜ヌスのロヌドを管理するための実践的な掞察ずベストプラクティスをいく぀か玹介したす。

結論

React Suspenseは、非同期操䜜を管理し、アプリケヌションのナヌザヌ゚クスペリ゚ンスを向䞊させるための匷力で柔軟なメカニズムを提䟛したす。Suspenseずリ゜ヌスのコアコンセプトを理解し、このブログ蚘事で抂説されおいる戊略を適甚するこずで、マルチリ゜ヌスのロヌドを効果的に管理し、グロヌバルオヌディ゚ンス向けのより応答性が高く堅牢なReactアプリケヌションを構築できたす。䞖界䞭のナヌザヌ向けにアプリケヌションを開発する際は、囜際化、アクセシビリティ、およびパフォヌマンスの最適化を考慮するこずを忘れないでください。これらのベストプラクティスに埓うこずで、機胜的であるだけでなく、ナヌザヌフレンドリヌで誰でもアクセスできるアプリケヌションを䜜成できたす。